<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

  <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
  *{ padding:0;margin:0;font-size:12px;}
  .list-inline a{ color:#f80;}
  .header{ height:36px; line-height: 36px; background: #f5f5f5;}
  .drop-down{ position: relative; width:76px;border:1px solid #f5f5f5;border-top:none;border-bottom: none;}
  .drop-down:hover{ background: #fff;border:1px solid #eee; border-top: none; border-bottom: none;}
  .drop-content{ position: absolute;width:90px; margin-left: -6px;}
  .drop-content ul{ list-style-type: none;border:1px solid #eee; border-top: none; padding-bottom:10px;}
  .drop-content ul li{ height:20px; line-height: 20px; padding-left: 5px;}
  .hide{ display: none;}
  .drop-content ul li:hover{ background:#eee;}
</style>
</head>
<body>
<div class="header">
  <div class="container">
  <div class="row">
    <div class="col-lg-3 nav">
      <ul class="list-inline">
        <li>
          <a>亲，请登录</a> 免费注册
        </li>
        <li>
          <div>手机逛淘宝</div>
        </li>
      </ul>
    </div>
    <div class="col-lg-5 col-lg-offset-4">
      <ul class="list-inline">
        <li class="drop-down">
          我的淘宝<span class="caret"></span>
          <div class="drop-content hide">
            <ul>
              <li>已买到的宝贝</li>
              <li>我的足迹</li>
            </ul>
          </div>
        </li>
        <li>商品分类</li>
        <li class="drop-down">
          收藏夹<span class="caret"></span>
          <div class="drop-content hide">
            <ul>
              <li>收藏的宝贝</li>
              <li>收藏的店铺</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>
</div>
<div style="padding:12px 0px; background: #eee;">hello world</div>
<script>
  $(".list-inline").on("mouseover","li",function(){
    $(this).children(".drop-content").removeClass("hide");
  });

  $(".list-inline").on("mouseout","li",function(){
    $(this).children(".drop-content").addClass("hide");
  });

</script>
</body>
</html>